<template>
	<div>
		<div class="content">
			<div class="nav">
				<h3>套卷列表
				<button class="right" @click="beginTaojuan">智能组卷</button>
				</h3>
				
			</div>
				<h4 v-if="testList.length==0">您还没有创建套卷</h4>
				<div class="test" v-for="(item,index) in testList">
					<div @click="openTest(item)">{{ item.name }}</div>
					<div>{{ item.coursename }}</div>
					<div>{{ item.updatetime }}</div>
					<div>{{ item.nums }}题</div>
					<div @click="deleteTest(index,item.id)">删除</div>
				</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import api from '../../api'
	import { API_ROOT } from '../../util/config'
	import { setStore, getStore, removeStore, subjectMatch } from "../../util/util";
	import { mapState, mapMutations } from 'vuex'
	export default {
		created() {
			var that = this;
			this.INIT_STATE()
			removeStore('currentTest')
			//获取服务器套卷信息
			api.getTest({
					courseid: 0,
					teacherid: this.userlogin.id
			}).then(function(out) {
				var data = out.data.data;
				that.testList = data;
				that.testNameList=that.testList.map(function(s){
					return s.name
				})
				that.testList.forEach(function(v,i){
					v['coursename']=subjectMatch(v.courseid)
				})
			})
		},
		data() {
			return {
				testList: [],
				testNameList: [],
				currentTest:{}
			}
		},
		computed:{
			...mapState(["userlogin"])
		},
		methods: {
			...mapMutations(["INIT_STATE"]),
			beginTaojuan() {
				var that=this
				this.$prompt(' ', '设置套卷名称', {
					confirmButtonText: '开始组卷',
					center: true,
					cancelButtonText: '取消',
					inputPlaceholder: '输入名称',
					inputValidator:function(value){
						var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]") 
						
						if(pattern.exec(value)) {
							return false
						}
					},
					inputErrorMessage: '请不要输入特殊字符'
				}).then(({
					value
				}) => {
//					this.$message({
//						type: 'success',
//						message: '你设置的套卷名称是: ' + value
//					});
					api.getTest({
						name:encodeURI(encodeURI(value))
					}).then(response=>{
						if(response.data.data.length>0){
							//代表后台已经有了此名字的题集
							that.showTip('抱歉！已重名')
						}else{
							
					that.currentTest={
						name:value,
						teacherid:this.userlogin.id,
						updatatime:(new Date()).toLocaleString()
					}
					setStore('currentTest',this.currentTest)
					that.Topath('createTest')
						}
					})
				}).catch(() => {
//					this.$message({
//						type: 'info',
//						message: '取消组卷'
//					});
				});
			},
			deleteTest(index,testid) {
				var that=this;
				//删除试卷套卷id 教师id
				api.deleteTest({
					qid:testid,
					teacherid:this.userlogin.id
				}).then(function(out){
					that.testList.splice(index, 1);
				})
				
			},
			openTest(item) {
				setStore('currentTest',item);
				this.$router.push({
					path: `/completeTaojuan/${item.courseid}/1`
				})
			},
			Topath(path) {
				this.$router.push({
					path: `/${path}/1`
				})
			}
		}
	}
</script>

<style scoped>
	.content {}
	
	.content>.nav {
		padding-left: 30px;
		height: 48px;
		line-height: 48px;
		font-size: 14px;
		background: #F5FAFC;
	}
	.content>.nav>h3{
		font-size: 16px;
	}
	.content>h4{
		text-align: center;
		margin-top: 24px;
	}
	.right {
		float: right;
		margin-top: 9px;
		width: 80px;
		padding: 0;
		height: 30px;
		margin-right: 20px;
		color: white;
		background-color: #14ACF4;
		outline: none;
		border: none;
	}
	
	.content .test {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px dashed #f2f2f2;
		line-height: 60px;
	}
	
	.content .test>div {
		overflow: hidden;
		text-align: center;
		cursor: default;
	}
	.content .test>div:nth-of-type(1){
		text-indent: 30px;
		text-align: left;
		cursor:pointer;
		flex: 4;
		font-weight: bold;
		font-size: 14px;
	}
	.content .test>div:nth-of-type(1):hover{
		color: #14ACF4;
		cursor: pointer;
	}
	.content .test>div:nth-of-type(2){
		font-size: 14px;
		flex:1
	}
	.content .test>div:nth-of-type(3){
		font-size: 14px;
		flex:2
	}
	.content .test>div:nth-of-type(4){
		font-size: 14px;
		flex:1
	}
	.content .test>div:nth-of-type(1):hover{
		
	}
	.content .test:nth-of-type(even) {
	}
	.content .test:nth-of-type(odd) {
	}
	
	.content .test>div:nth-last-of-type(1) {
		color: deepskyblue;
		cursor:pointer
	}
	.content .test>div:nth-last-of-type(1):hover{
		color: red;
	}
</style>